<template>
  <h1>个人简历练习</h1>
  <table border="2px">
    <tr>
      <th>照片</th>
      <td>
        <img :src="person.Url"  width="100px" alt="">
      </td>
    </tr>
    <tr>
      <th>姓名</th>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <th>年龄</th>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="item in person.friends">{{item}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="change">修改</button>
</template>
<script setup>
import {ref} from "vue";

const person = ref({Url: '',name: '', age: '', friends: []});
const change = () => {
  // person.value.Url = '../../../Web/day05/img/fcq.jpg';
  person.value.Url = 'fcq.jpg';
  person.value.name = '范传奇';
  person.value.age = 18;
  person.value.friends.push('赵六','八戒','悟空','悟能');
}
</script>
<style scoped>

</style>